// 租期管理员
import React, {
  useEffect
} from 'react';
import leaseadmin from '../assets/css/leaseadmin.module.css';
import modal from '../assets/css/modal.module.css'
import custom from '../assets/css/custom/customIndex.module.css';
import { DownOutlined,UpOutlined } from '@ant-design/icons';
import { Radio } from 'antd';
import { useState } from 'react';
import { Collapse } from 'antd';
import { Button, Input } from 'antd';
import { Table, Modal } from 'antd';
import axios from 'axios';
const { Panel } = Collapse;

export default function Sign() {

  // 查询
  let [selName, setSelName] = useState('');
  let [selPhone, setSelPhone] = useState('');

  // 存储查询单条数据
  let [selListRow, setSelListRow] = useState([]);

  // 存储单行数据
  let [listRow, setListRow] = useState({});
  // 折叠
  const [collapsed, setCollapsed] = useState(true);


  // 展开
  const handleCollapse = () => {
    setCollapsed(!collapsed);
  };

  // 表头配置
  const columns = [
    {
      title: '客户名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <span className={leaseadmin.col}>{text}</span>
    },
    {
      title: '租住楼宇',
      dataIndex: 'build',
      key: 'build',
    },
    {
      title: '管理员',
      dataIndex: 'link',
      key: 'link',
      render: (text) => {
        return text == null ? "--" : text;
      }
    },
    {
      title: '管理员手机号',
      dataIndex: 'phone',
      key: 'phone',
      render: (text) => {
        return text == null ? "--" : text;
      }
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      render: (text) => {
        return text == null ? "--" : text;
      }
    },
    {
      title: '操作',
      dataIndex: 'caozuo',
      key: 'caozuo',
      render: (text, row) => <span onClick={() => {
        console.log(row);
        // 存储单挑数据
        setListRow(row)
        // console.log(listRow);

        setListName(row.link);
        setListPhone(row.phone);
        setListEmail(row.email);
        setListID(row.auth);
        // console.log(123);

        // console.log(row.id, row.link, row.phone, row.email, row.auth);
        setIsModalOpen(true)
      }} className={leaseadmin.col}>设置联系人{text}
      </span>
    }
  ];

  // 分页器
  const itemRender = (page, type, originalElement) => {
    if (type === 'prev') {
      return;
    }
    if (type === 'next') {
      return <a>下一页</a >;
    }

    return originalElement;
  };

  // 单选框
  const [value, setValue] = useState(1);
  const onChange = (e) => {
    // console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  // 表格数据
  // const [tableData, setTableData] = useState(initialTableData);


  // 模态框
  const [isModalOpen, setIsModalOpen] = useState(false);


  // 表格数据
  let [ctableData, setCableData] = useState([]);
  let [listName, setListName] = useState('');
  let [listPhone, setListPhone] = useState('');
  let [listEmail, setListEmail] = useState('');
  let [listId, setListID] = useState('');

  // 渲染表格数据
  let leaseTableData = () => {
    axios.get('/api/lease').then(res => {
      // console.log(res.data);
      setCableData([...res.data.data])
    })
  }

  //默认渲染第一页的数据
  useEffect(() => {
    leaseTableData();
  }, [])

  return (
    <div>
      <div className={leaseadmin.box}>
        <h2 className={leaseadmin.title}>签约联系人</h2>
        <div className={leaseadmin.top}>

          <div className={leaseadmin.row}>
            <input onChange={(e) => {
              setSelName(e.target.value);
            }} value={selName} placeholder='请输入客户名称' type="text" className={leaseadmin.infir} />
          </div>
          <div className={leaseadmin.row}>
            <span className={leaseadmin.label}>管理员手机号</span>
            <input onChange={(e) => {
              setSelPhone(e.target.value);
            }} value={selPhone} type="text" className={leaseadmin.intwo} />
          </div>
          <div className={`${leaseadmin.row} ${leaseadmin.rowthird}`}>
            <span className={leaseadmin.label}>租期状态</span>
            <Radio.Group className={leaseadmin.radio} onChange={onChange} value={value}>
              <Radio value={1}>已设置</Radio>
              <Radio value={2}>未设置</Radio>
            </Radio.Group>
          </div>
          {/* 展开 */}
          {!collapsed && (
            <>
              <div className={custom.state}>
                <span>状态</span>

              </div>
              <div className={custom.row}>
                <span>面积</span>
                <Input className={custom.input} /> <span>m<sup>2</sup></span>
                <span className={custom.bolang}>~</span><Input className={`${custom.input} ${custom.day}`} /><span>m<sup>2</sup></span>
              </div>
              <div className={custom.row}>
                <span>装修</span>

              </div>
              <div className={custom.row}>

              </div>
            </>
          )}
          <div className={custom.line}>
            <div className={custom.collapseButton} onClick={handleCollapse}>
              <span className={custom.zhankai}>
                {collapsed ? <div><DownOutlined />展开筛选</div> : <div><UpOutlined />收起筛选</div>}
              </span>
            </div>
          </div>
          <div className={leaseadmin.btn}>
            <Button onClick={() => {
              axios.get('/api/lease/select', {
                params: {
                  name: selName,
                  phone: selPhone
                }
              }).then(res => {
                console.log(res.data.data);
                setSelListRow(res.data.data);
                console.log(selListRow);
                setCableData(res.data.data);

                // console.log(cableData);

              })
            }} className={leaseadmin.primary} type="primary">查询</Button>
            <Button onClick={() => {
              setSelName('')
              setSelPhone('')
              setSelListRow('');
              leaseTableData();
            }} className={leaseadmin.reset}>重置</Button>
          </div>

        </div>

        <div className={leaseadmin.bottom}>
          <div className={leaseadmin.bottombox}>
            <Table className={leaseadmin.tab}
              pagination={{
                pageSize: 5, // 每页显示5条数据
                total: ctableData.length, // 总数据条数
                showTotal: (total, range) => `共${total}条记录,每页${range[1] - range[0] + 1}条`,
                itemRender, // 使用自定义的分页器渲染
                showQuickJumper: true, // 启用快速跳转
              }}
              dataSource={ctableData}
              columns={columns}
              rowKey={(record) => record.key}
            />
          </div>
        </div>
      </div>
      <Modal footer={null} className={modal.modalz} open={isModalOpen} onOk={() => { setIsModalOpen(false) }} onCancel={() => { setIsModalOpen(false) }}>
        <div className={modal.box}></div>
        <h3 className={modal.title}>设置租期管理员</h3>
        <div className={modal.form}>
          <div className={modal.row}>
            <div className={modal.item}>
              <div>
                <span className={modal.star}>*</span>
                <span className={modal.font}>管理员姓名</span>
              </div>
              <Input onChange={(e) => {
                setListName(e.target.value)
              }} value={listName} className={modal.input} placeholder='请输入联系人姓名'></Input>
            </div>
            <div className={modal.item}>
              <div>
                <span className={modal.star}>*</span>
                <span className={modal.font}>管理员手机号</span>
              </div>
              <div className={modal.phone}>
                <Input value={'中国+86'} className={modal.address}></Input>
                <Input onChange={(e) => {
                  setListPhone(e.target.value)
                }} value={listPhone} className={`${modal.input} ${modal.newphone}`} placeholder='请输入新手机号'></Input>
              </div>
            </div>
            <div className={modal.item}>
              <div>
                <span className={modal.font}>管理员邮箱</span>
              </div>
              <Input onChange={(e) => {
                setListEmail(e.target.value)
              }} value={listEmail} className={modal.input} placeholder='请输入联系人邮箱'></Input>
            </div>
            <div className={modal.item}>
              <div>
                <span className={modal.font}>证件号</span>
              </div>
              <Input onChange={(e) => {
                setListID(e.target.value)
              }} value={listId} className={modal.input} placeholder='请输入管理员职务'></Input>
            </div>
          </div>
          <div className={modal.footer}>
            <Button onClick={() => {
              // console.log(listRow);

              axios.put('/api/lease/edit', {
                id: listRow.id,
                link: listName,
                phone: listPhone,
                email: listEmail,
                auth: listId
              }).then(res => {
                // console.log(res);
                leaseTableData();
              })
              setIsModalOpen(false)
            }} className={modal.ok}>确认</Button>
            <Button onClick={() => {
              setIsModalOpen(false)
            }} className={modal.cancel}>取消</Button>
          </div>
        </div>

      </Modal>
    </div>
  );
}